<template>
  <div class="page-container">
    <div class="page-container-header">{{ t('menu.classSchedule') }}</div>

    <div class="content" v-loading="loading">
      <el-row>
        <el-col :span="8">
          <el-calendar v-model="date" :first-day-of-week="firstDayOfWeek">
            <template #header="{ date }">
              <div class="calendar-header">
                <div class="left">
                  <span>{{ date }}</span>
                </div>
                <div class="right">
                  <div class="arrow-left" @click="previousMonth">
                    <img src="/assets/admin/arrow-left-jt.png" alt="" />
                  </div>
                  <div class="arrow-right" @click="nextMonth">
                    <img src="/assets/admin/arrow-right-jt.png" alt="" />
                  </div>
                </div>
              </div>
            </template>
            <template #date-cell="{ data }">
              <div class="calendar-day" :class="{
                'past-date': isPastDate(data.day),
                'current-date': isCurrentDate(data.day),
                'future-date': isFutureDate(data.day),
                'selected-date': isSelectedDate(data.day),
              }" @click="selectDate(data.day)">
                <span class="date-number">
                  {{ data.day.split("-").slice(2).join("-") }}
                </span>
                <div v-if="getDateStatus(data.day) !== 'none'" class="status-dot" :class="getDateStatus(data.day)">
                </div>
              </div>
            </template>
          </el-calendar>
          <div class="tip">
            <div>
              <span class="expired dot"></span>
              <span>{{ t('adminClassSchedule.tip.expired') }}</span>
            </div>
            <div>
              <span class="dot"></span>
              <span>{{ t('adminClassSchedule.tip.available') }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="right-content">
            <div class="right-content-header">{{ t('adminClassSchedule.courseListTitle') }}</div>
            <div class="right-content-header-select">
              <div class="select-item" :class="selectedCourseType == 0 ? 'select-right' : ''" @click="handleSelect(0)">
                {{ t('adminClassSchedule.filter.all') }}
              </div>
              <div class="select-item" :class="selectedCourseType == 1 ? 'select-right' : ''" @click="handleSelect(1)">
                {{ t('adminClassSchedule.filter.group') }}
              </div>
              <div class="select-item" :class="selectedCourseType == 2 ? 'select-right' : ''" @click="handleSelect(2)">
                {{ t('adminClassSchedule.filter.private') }}
              </div>
              <div class="select-item" :class="selectedCourseType == 3 ? 'select-right' : ''" @click="handleSelect(3)">
                {{ t('adminClassSchedule.filter.trial') }}
              </div>
              <div class="select-item" :class="selectedCourseType == 4 ? 'select-right' : ''" @click="handleSelect(4)">
                {{ t('adminClassSchedule.filter.temporary') }}
              </div>

            </div>

            <div class="cursor-list">
              <div v-for="course in currentCourses" :key="course.id" class="cursor-list-item">
                <!-- 课程时间、年龄、地点信息 -->
                <div class="course-info-top">
                  <div class="course-time-info">
                    <span class="time-indicator" :class="{ expired: course.isExpired }"></span>
                    <span class="course-time">{{ course.time }}</span>
                    <span class="age-range">{{ course.ageRange }}</span>
                    <span class="location">{{ course.location }}</span>
                  </div>
                  <div class="course-status">
                    <div class="status-actions" v-if="course.actions && course.actions.length">
                      <el-button v-for="action in course.actions" :key="action.key" class="status-btn" type="primary"
                        :loading="isActionLoading(course, action)"
                        :disabled="action.disabled || isActionLoading(course, action)"
                        @click="handleStatusAction(course, action)">
                        <span v-if="isActionLoading(course, action)">
                          {{ t('adminClassSchedule.actions.processing') }}
                        </span>
                        <span v-else>{{ action.label }}</span>
                      </el-button>
                    </div>
                  </div>
                </div>

                <!-- 课程标题 -->
                <div class="course-title-info">
                  <div class="course-title">{{ course.title }}</div>
                  <div class="course-type">{{ course.type }}</div>
                </div>

                <div class="course-info-bottom">
                  <!-- 教练信息 -->
                  <div class="instructor-info">
                    <span class="instructor-label">{{ t('adminClassSchedule.placeholder.teacher') }}:</span>
                    <span class="instructor-name">{{ course.teacherName ?? '-' }}</span>
                  </div>

                  <!-- 预约信息 -->
                  <div class="booking-info">
                    <span class="booking-stats">{{ t('adminClassSchedule.bookingStats', {
                      available: course.availableNumber,
                      booked: course.alreadyBookedNumber,
                    }) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { GetSchoolTimetable, GetAppointmentCalendar, ReservationOrLeaveOrSignIn } from '~/apis/admin';
import { useI18n } from 'vue-i18n';

definePageMeta({
  ssr: true, // 必须为 true
  isTokenCheck: true,
  title: "课程表",
  zh_hk_title: "課程表",
  en_title: "Timetable",
});

const { t, locale } = useI18n();

// 上课前多少小时可展示预约/请假按钮，便于后续调整，注意，单位是「小时」
const ACTION_VISIBLE_BEFORE_HOURS = 2;

const selectedCourseType = ref(0);
const date = ref(new Date());
const selectedDate = ref(new Date());
const loading = ref(false);
const firstDayOfWeek = 7;
// 课程数据
const courses = ref([]);

const currentCourses = ref([])
// 日历可预约日期数据
const calendarDates = ref([]);
const actionLoadingKey = ref('');

const route = useRoute();

const courseId = computed(() => route.query.courseId);
const studentId = computed(() => route.query.studentId);

// 格式化日期为 YYYY-MM-DD 格式
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 将日期与时间字段拼接为 Date 对象
const parseTimeValue = (timeValue) => {
  if (!timeValue) {
    return { hour: 0, minute: 0, second: 0 };
  }
  if (typeof timeValue === 'string') {
    const pureTime =
      timeValue.includes('T') || timeValue.includes(' ')
        ? timeValue.split('T')[1]?.split(' ')[0] || ''
        : timeValue;
    const [hour = '0', minute = '0', second = '0'] = pureTime.split(':');
    return {
      hour: Number(hour) || 0,
      minute: Number(minute) || 0,
      second: Number(second) || 0,
    };
  }
  return {
    hour: Number(timeValue.hour || 0),
    minute: Number(timeValue.minute || 0),
    second: Number(timeValue.second || 0),
  };
};

const buildDateTime = (dateText, timeValue) => {
  if (!dateText || !timeValue) return null;
  const { hour, minute, second } = parseTimeValue(timeValue);
  const timeText = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:${String(second || 0).padStart(2, '0')}`;
  const target = new Date(`${dateText}T${timeText}`);
  if (Number.isNaN(target.getTime())) {
    return null;
  }
  return target;
};

const isSameDay = (a, b) => {
  return a.getFullYear() === b.getFullYear()
    && a.getMonth() === b.getMonth()
    && a.getDate() === b.getDate();
};

const getStartOfWeek = (targetDate, weekStart = 1) => {
  const start = new Date(targetDate);
  const day = start.getDay(); // 0 表示周日
  const normalizedStart = weekStart % 7; // 允许 7 表示周日
  const diff = (day - normalizedStart + 7) % 7;
  start.setDate(start.getDate() - diff);
  start.setHours(0, 0, 0, 0);
  return start;
};

const getEndOfWeek = (targetDate, weekStart = 1) => {
  const start = getStartOfWeek(targetDate, weekStart);
  const end = new Date(start);
  end.setDate(start.getDate() + 6);
  end.setHours(23, 59, 59, 999);
  return end;
};

const calendarDisplayRange = computed(() => {
  const current = new Date(date.value);
  const firstDayOfMonth = new Date(current.getFullYear(), current.getMonth(), 1);
  const lastDayOfMonth = new Date(current.getFullYear(), current.getMonth() + 1, 0);

  const start = getStartOfWeek(firstDayOfMonth, firstDayOfWeek);
  const end = getEndOfWeek(lastDayOfMonth, firstDayOfWeek);

  return {
    start,
    end,
    startText: formatDate(start),
    endText: formatDate(end),
  };
});

// 上一月
const previousMonth = () => {
  const newDate = new Date(date.value);
  newDate.setMonth(newDate.getMonth() - 1);
  date.value = newDate;
  // 月份改变时重新获取日历数据

  fetchCalendarData();
};

// 下一月
const nextMonth = () => {
  const newDate = new Date(date.value);
  newDate.setMonth(newDate.getMonth() + 1);
  date.value = newDate;
  // 月份改变时重新获取日历数据
  fetchCalendarData();
};

// 判断是否为过去的日期
const isPastDate = (dateStr) => {
  const targetDate = new Date(dateStr);
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  targetDate.setHours(0, 0, 0, 0);
  return targetDate < today;
};

// 判断是否为今天
const isCurrentDate = (dateStr) => {
  const targetDate = new Date(dateStr);
  const today = new Date();
  return targetDate.toDateString() === today.toDateString();
};

// 判断是否为未来日期
const isFutureDate = (dateStr) => {
  const targetDate = new Date(dateStr);
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  targetDate.setHours(0, 0, 0, 0);
  return targetDate > today;
};

// 判断是否为选中的日期
const isSelectedDate = (dateStr) => {
  const targetDate = new Date(dateStr);
  return targetDate.toDateString() === selectedDate.value.toDateString();
};

// 选择日期
const selectDate = (dateStr) => {
  if (!isPastDate(dateStr)) {
    selectedDate.value = new Date(dateStr);
    // 选择日期后重新获取课程数据
    fetchCourseData();
  }
};

// 获取日期状态（可预约/不可预约）
const getDateStatus = (dateStr) => {
  // 基于API返回的日历数据判断日期状态
  const currentDate = new Date(dateStr);
  const todayDate = new Date();
  todayDate.setHours(0, 0, 0, 0);
  currentDate.setHours(0, 0, 0, 0);



  if (calendarDates.value.includes(dateStr)) {
    if (currentDate < todayDate) {
      return "expired";
    }
    return "available";
  }
  return "none";
};

const getCourseStartDateTime = (course) => {
  if (course.startDateTime) {
    return typeof course.startDateTime === 'string'
      ? new Date(course.startDateTime)
      : course.startDateTime;
  }
  return buildDateTime(course.classDate, course.startTime);
};

const getCourseEndDateTime = (course) => {
  if (course.endDateTime) {
    return typeof course.endDateTime === 'string'
      ? new Date(course.endDateTime)
      : course.endDateTime;
  }
  return buildDateTime(course.classDate, course.endTime);
};

// 是否处于可展示预约/请假类按钮的提前窗口
const canShowPreClassAction = (course) => {
  const startDateTime = getCourseStartDateTime(course);
  if (!startDateTime) return false;
  return startDateTime.getTime() - Date.now() >= ACTION_VISIBLE_BEFORE_HOURS * 60 * 60 * 1000;
};

// 签到按钮的展示与禁用状态
// 签到时间窗口：开课前1小时 到 课程结束后1小时
const SIGN_IN_BEFORE_START_HOURS = 1; // 开课前多少小时可签到
const SIGN_IN_AFTER_END_HOURS = 1;    // 课程结束后多少小时内可签到

const getSignInActionState = (course) => {
  const startDateTime = getCourseStartDateTime(course);
  const endDateTime = getCourseEndDateTime(course);

  if (!startDateTime) {
    return { showSignIn: false, signInDisabled: true };
  }

  const now = Date.now();
  const oneHourMs = 60 * 60 * 1000;

  // 签到时间窗口：开课前1小时 到 课程结束后1小时
  const signInWindowStart = startDateTime.getTime() - SIGN_IN_BEFORE_START_HOURS * oneHourMs;
  const signInWindowEnd = endDateTime
    ? endDateTime.getTime() + SIGN_IN_AFTER_END_HOURS * oneHourMs
    : startDateTime.getTime() + SIGN_IN_AFTER_END_HOURS * oneHourMs;

  // 已超过签到窗口结束时间，隐藏按钮
  if (now > signInWindowEnd) {
    return { showSignIn: false, signInDisabled: true };
  }

  // 在签到时间窗口内，允许签到
  if (now >= signInWindowStart) {
    return { showSignIn: true, signInDisabled: false };
  }

  // 未到签到时间窗口，显示但禁用
  return { showSignIn: true, signInDisabled: true };
};

// 课程是否已过期
const isCourseExpired = (course) => {
  const endDateTime = getCourseEndDateTime(course);
  if (endDateTime) {
    return endDateTime.getTime() < Date.now();
  }
  const startDateTime = getCourseStartDateTime(course);
  return startDateTime ? startDateTime.getTime() < Date.now() : false;
};

const handleSelect = (params) => {
  selectedCourseType.value = params;
  if (!courses.value) return
  if (params == 0) {
    currentCourses.value = courses.value;
  } else {
    currentCourses.value = courses.value.filter(item => item.category === params);
  }
};

// 获取课程表数据
const fetchCourseData = async () => {
  try {
    loading.value = true;
    const params = {
      classDate: formatDate(selectedDate.value), // 格式化选中的日期
      courseId: courseId.value,
      studentId: studentId.value,
    };

    const response = await GetSchoolTimetable(params);
    if (response.code === 0) {
      // 转换API数据格式为组件所需格式
      courses.value = (response.data || []).map(item => transformCourseData(item));
      nextTick(() => {
        handleSelect(selectedCourseType.value);
      });
    }
  } catch (error) {
    console.error('获取课程数据失败:', error);
    if (process.client) {
      ElMessage.error(t('adminClassSchedule.message.failed'));
    }
  } finally {
    loading.value = false;
  }
};

// 获取日历数据
const fetchCalendarData = async () => {
  try {
    const { startText, endText } = calendarDisplayRange.value;
    const params = {
      startDate: startText,
      endDate: endText,
      courseId: courseId.value,
      studentId: studentId.value,
    };

    const response = await GetAppointmentCalendar(params);
    if (response.code === 0) {
      calendarDates.value = response.data || [];
    }
  } catch (error) {
    console.error('获取日历数据失败:', error);
    if (process.client) {
      ElMessage.error(t('adminClassSchedule.message.failed'));
    }
  }
};

// 基于状态构建按钮与文案
const buildCourseView = (course) => {
  const actions = [];
  const showPreClassAction = canShowPreClassAction(course);
  const { showSignIn, signInDisabled } = getSignInActionState(course);
  const expired = isCourseExpired(course);

  if (course.signInStatus === 0) {
    if (course.scheduleType === 1 && showPreClassAction) {
      actions.push({
        key: course.leaveStatus === 1 ? 'cancelLeave' : 'leave',
        label: course.leaveStatus === 1
          ? t('adminClassSchedule.actions.cancelLeave')
          : t('adminClassSchedule.actions.leave'),
        className: course.leaveStatus === 1 ? 'green' : 'black',
        busType: 1,
        operateType: course.leaveStatus === 1 ? 1 : 0,
      });
    }

    if (course.scheduleType === 2 && showPreClassAction) {
      actions.push({
        key: course.reservationStatus === 1 ? 'cancelReserve' : 'reserve',
        label: course.reservationStatus === 1
          ? t('adminClassSchedule.actions.cancelReserve')
          : t('adminClassSchedule.actions.reserve'),
        className: course.reservationStatus === 1 ? 'green' : 'appointment',
        busType: 0,
        operateType: course.reservationStatus === 1 ? 1 : 0,
      });
    }

    if (showSignIn) {
      actions.push({
        key: 'signIn',
        label: t('adminClassSchedule.actions.signIn'),
        className: 'appointment',
        busType: 2,
        operateType: 0,
        disabled: signInDisabled || expired,
      });
    }
  }

  return {
    actions,
    isExpired: expired,
  };
};

const applyCourseView = (course) => {
  const view = buildCourseView(course);
  course.actions = view.actions;
  course.isExpired = view.isExpired;
  return course;
};

// 转换API数据为组件所需格式
const transformCourseData = (apiData) => {
  const startDateTime = buildDateTime(apiData.classDate, apiData.startTime);
  const endDateTime = buildDateTime(apiData.classDate, apiData.endTime);
  const alreadyBookedNumber = Number(apiData.alreadyBookedNumber || 0);
  const maxAttendees = Number(apiData.maxNumberAttendees || apiData.numberAttendees || 0);
  const ageRangeText = t('adminClassSchedule.placeholder.ageRange', { age: apiData.applicableAge || 0 });
  const locationText = apiData.venueName || t('adminClassSchedule.placeholder.pending');
  const titleText = apiData.courseName || apiData.title || t('adminClassSchedule.placeholder.title');
  const instructorText = apiData.teacherName || apiData.instructor || t('adminClassSchedule.placeholder.teacher');
  // 根据API返回的数据结构进行转换
  const course = {
    id: apiData.id || apiData.courseSchedulesId,
    time: formatTimeRange(apiData.startTime, apiData.endTime),
    ageRange: ageRangeText,
    location: locationText,
    title: titleText,
    instructor: instructorText,
    type: getCourseTypeName(apiData.courseType),
    category: Number(apiData.courseType || 1),
    // 预约/请假/签到状态
    reservationStatus: Number(apiData.reservationStatus || 0),
    leaveStatus: Number(apiData.leaveStatus || 0),
    signInStatus: Number(apiData.signInStatus || 0),
    scheduleType: Number(apiData.scheduleType || 0),
    classDate: apiData.classDate,
    startTime: apiData.startTime,
    endTime: apiData.endTime,
    startDateTime,
    endDateTime,
    // 已预约人数
    alreadyBookedNumber,
    // 可预约人数
    availableNumber: maxAttendees > 0 ? Math.max(maxAttendees - alreadyBookedNumber, 0) : 0,
    teacherName: apiData.courseSchedulesTeacherList?.[0].teacherName,
  };

  return applyCourseView(course);
};

const syncCourseState = (courseId, updater) => {
  const applyUpdater = (item) => {
    if (item && item.id === courseId) {
      updater(item);
      applyCourseView(item);
    }
  };
  courses.value.forEach(applyUpdater);
  currentCourses.value.forEach(applyUpdater);
};

const isActionLoading = (course, action) => actionLoadingKey.value === `${course.id}-${action.key}`;

const handleStatusAction = async (course, action) => {
  if (!action || action.disabled || isActionLoading(course, action)) return;
  if (action.key === 'signIn') {
    ElMessage.warning(t('adminClassSchedule.message.signInTip'));
    return;
  }
  actionLoadingKey.value = `${course.id}-${action.key}`;
  try {
    const params = {
      id: course.id,
      busType: action.busType,
      operateType: action.operateType,
    };
    const res = await ReservationOrLeaveOrSignIn(params);
    if (res.code === 0) {
      syncCourseState(course.id, (item) => {
        if (action.key === 'reserve') item.reservationStatus = 1;
        if (action.key === 'cancelReserve') item.reservationStatus = 0;
        if (action.key === 'leave') item.leaveStatus = 1;
        if (action.key === 'cancelLeave') item.leaveStatus = 0;
        if (action.key === 'signIn') item.signInStatus = 1;
      });
      if (process.client) {
        ElMessage.success(t('adminClassSchedule.message.success'));
      }
    } else if (process.client) {
      ElMessage.error(res.msg || t('adminClassSchedule.message.failed'));
    }
  } catch (error) {
    console.error('操作失败:', error);
    if (process.client) {
      ElMessage.error(t('adminClassSchedule.message.failed'));
    }
  } finally {
    actionLoadingKey.value = '';
  }
};

const formatSingleTime = (timeValue) => {
  const { hour, minute } = parseTimeValue(timeValue);
  return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
};

// 格式化时间范围
const formatTimeRange = (startTime, endTime) => {
  if (!startTime || !endTime) return t('adminClassSchedule.placeholder.timePending');
  return `${formatSingleTime(startTime)} ~ ${formatSingleTime(endTime)}`;
};

// 获取课程类型名称
const getCourseTypeName = (courseType) => {
  const typeNames = {
    1: t('courseDetail.typeGroup'),
    2: t('courseDetail.typePrivate'),
    3: t('courseDetail.typeTrial'),
    4: t('courseDetail.typeTemporary'),
  };
  return typeNames[courseType] || '';
};

// 组件挂载时初始化数据
onMounted(() => {
  fetchCalendarData();
  fetchCourseData();
});

watch(locale, () => {
  courses.value.forEach(applyCourseView);
  courses.value = courses.value.map(item => ({
    ...item,
    type: getCourseTypeName(item.category),
  }));
  currentCourses.value = currentCourses.value.map(item => ({
    ...applyCourseView(item),
    type: getCourseTypeName(item.category),
  }));
});
</script>

<style lang="less" scoped>
.page-container {
  width: 100%;

  .page-container-header {
    width: 100%;
    font-family: PingFang HK, PingFang HK;
    font-weight: 600;
    font-size: 20px;
    color: #1e2021;
    margin-bottom: 12px;
  }
}

.content {
  width: 100%;
  height: 100%;
  background-color: #ffffff;

  .tip {
    padding: 0 34px 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    div {
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 14px;
      color: #1e2021;
      margin: 0 20px;

      .dot {
        width: 10px;
        height: 10px;
        background: #007d8b;
        border-radius: 50%;
        display: inline-block;
        margin-right: 10px;
      }

      .expired {
        background-color: #d9d9d9;
      }
    }
  }

  .calendar-day {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 4px;
    position: relative;
    cursor: pointer;

    &.past-date {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.future-date {
      color: #1e2021;
      font-weight: 500;
    }

    &.selected-date {
      background-color: #ff6b35 !important;
      color: white !important;
      border-radius: 50%;
      width: 40px !important;
      height: 40px !important;
      font-weight: 600;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 auto !important;
      min-width: 40px !important;
      min-height: 40px !important;
      max-width: 40px !important;
      max-height: 40px !important;
    }

    .date-number {
      z-index: 1;
      line-height: 1;
    }

    .status-dot {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      z-index: 2;

      &.available {
        background-color: #007d8b;
      }

      &.expired {
        background-color: #c0c4cc;
      }
    }
  }

  .calendar-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      font-family: PingFang HK, PingFang HK;
      font-weight: 400;
      font-size: 30px;
      color: #1b1d21;
      text-align: left;
    }

    .right {
      display: flex;
      justify-content: center;
      align-items: center;

      div {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        cursor: pointer;

        img {
          width: 16px;
        }
      }
    }
  }

  // 移除Element Plus日历组件的所有动画效果
  :deep(.el-calendar-day) {
    height: 60px !important;
    width: 60px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    margin: 0 auto !important;
    transition: none !important;
    animation: none !important;
  }

  // 移除所有可能的动画和过渡效果
  :deep(.el-calendar-table td) {
    border: none !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 8px !important;
    height: 60px !important;
    width: 60px !important;
    transition: none !important;
    animation: none !important;
  }

  :deep(.el-calendar-table tr) {
    border: none !important;
    height: 60px !important;
    transition: none !important;
    animation: none !important;
  }

  // 移除选中状态的动画
  :deep(.el-calendar-table td.is-selected .el-calendar-day) {
    background-color: transparent !important;
    transition: none !important;
    animation: none !important;
  }

  :deep(.el-calendar-table .el-calendar-day.is-selected) {
    background-color: transparent !important;
    transition: none !important;
    animation: none !important;
  }

  :deep(.el-calendar-table .el-calendar-day.is-today) {
    background-color: transparent !important;
    transition: none !important;
    animation: none !important;
  }

  // 移除所有悬停动画
  :deep(.el-calendar-day:hover) {
    background-color: transparent !important;
    color: inherit !important;
    transition: none !important;
    animation: none !important;
  }

  :deep(.el-calendar-table td:hover .el-calendar-day) {
    background-color: transparent !important;
    color: inherit !important;
    transition: none !important;
    animation: none !important;
  }

  :deep(.el-calendar-table .el-calendar-day:hover) {
    background-color: transparent !important;
    color: inherit !important;
    transition: none !important;
    animation: none !important;
  }

  // 移除Element Plus默认的悬停效果
  :deep(.el-calendar-table td:hover) {
    background-color: transparent !important;
    transition: none !important;
    animation: none !important;
  }

  :deep(.el-calendar-table tr:hover) {
    background-color: transparent !important;
    transition: none !important;
    animation: none !important;
  }

  // 移除Element Plus的CSS变量悬停效果
  :deep(.el-calendar) {
    --el-calendar-selected-bg-color: transparent !important;
    --el-calendar-hover-bg-color: transparent !important;
  }

  // 确保移除所有悬停相关的样式
  :deep(.el-calendar-table .el-calendar-day:focus) {
    background-color: transparent !important;
  }

  :deep(.el-calendar-table .el-calendar-day:active) {
    background-color: transparent !important;
  }

  :deep(.el-calendar-table) {
    border-bottom: 1px solid #e2e2e2;
  }

  .right-content {
    padding: 30px;
    box-sizing: border-box;

    .right-content-header {
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 20px;
      color: #000000;
      text-align: left;
    }

    .right-content-header-select {
      width: 100%;
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .select-item {
        padding: 8px 10px;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        margin-right: 12px;
        cursor: pointer;
      }

      .select-right {
        border: 1px solid #ec4613;
        color: #ec4613;
      }
    }

    .cursor-list {
      width: 100%;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;

      .cursor-list-item {
        width: 100%;
        min-height: 159px;
        background: #f9f9f9;
        border-radius: 4px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 12px;

        .course-info-top {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;

          .course-time-info {
            display: flex;
            align-items: center;
            gap: 12px;

            .time-indicator {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: #d9d9d9;
              flex-shrink: 0;

              &.expired {
                background: #d9d9d9;
              }
            }

            .course-time {
              font-family: PingFang HK, PingFang HK;
              font-weight: 500;
              font-size: 18px;
              color: #1e2021;
            }

            .age-range {
              padding: 2px 8px;
              background: transparent;
              border: 1px dashed #ff6b35;
              border-radius: 4px;
              font-family: PingFang HK, PingFang HK;
              font-weight: 500;
              font-size: 12px;
              color: #ff6b35;
            }

            .location {
              font-family: PingFang HK, PingFang HK;
              font-weight: 500;
              font-size: 14px;
              color: #1e2021;
            }
          }

          .course-status {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;

            .status-actions {
              display: flex;
              flex-wrap: wrap;
              gap: 8px;
              justify-content: flex-end;
            }

            .status-btn {
              min-width: 108px;
            }
          }
        }

        .course-title-info,
        .course-info-bottom {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
        }

        .course-title {
          font-family: PingFang HK, PingFang HK;
          font-weight: 600;
          font-size: 16px;
          color: #1e2021;
          line-height: 1.4;
        }

        .course-title-info {
          .course-type {
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 14px;
            color: #1e2021;
          }
        }

        .instructor-info {
          display: flex;
          align-items: center;
          gap: 8px;

          .instructor-label {
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 14px;
            color: #808080;
            flex-shrink: 0;
          }

          .instructor-name {
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 14px;
            color: #1e2021;
          }
        }

        .booking-info {
          display: flex;
          justify-content: flex-end;

          .booking-stats {
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 14px;
            color: #1e2021;

            &::before {
              content: "";
              display: inline-block;
              width: 1px;
              height: 12px;
              background: #e5e5e5;
              margin: 0 8px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>
